<template>
  <div class="wave">
    <div class="top-circle" ref="topCircle" @touchstart="touch" @touchmove="touch" @touchend="touch">
      <div class="circle" ref="circle" :class="{shrink:!waveFlag,enlarge:largeFlag}"></div>
      <div class="circle pulsate1" v-if="waveFlag"></div>
      <!-- <div class="circle pulsate2"></div>
      <div class="circle pulsate3"></div> -->
    </div>
  </div>
</template>

<script lang="ts">
import { Vue, Options } from 'vue-property-decorator';
interface Pos{
  x: number,
  y: number
}

@Options({ components: {} })
export default class WaterWave extends Vue {
  public rect: DOMRect|null = null;
  public circleRect: DOMRect|null = null;
  public waveFlag = true;
  public largeFlag = false;
  private endTo: Pos = { x: 0, y: 0 };
  private current: Pos={ x: 0, y: 0 };
  private timer: null|number = null;
  private y=0;

  public touch(ev: TouchEvent) {
    console.log(ev);
    switch (ev.type) {
      case 'touchstart': {
        this.waveFlag = false;
        if (!this.timer) {
          console.log('start');
          this.play();
        }
        break;
      }
      case 'touchmove': {
        this.endTo.y = ev.touches[0].pageY;
        if (!this.timer) {
          this.play();
        }
        break;
      }
      case 'touchend': {
        console.log('end');
        this.waveFlag = true;
        this.largeFlag = true;
        this.timer = null;
        this.back();
        break;
      }
    }
    this.largeFlag = false;
  }
  public back() {
    console.log(-this.y, this.largeFlag);
    const translateY = -this.y;
    (this.$refs.topCircle as HTMLDivElement).style.transform = `translate(0px,${translateY}px)`;
  }
  public play() {
    if (this.endTo.y > this.circleRect!.y) {
      this.current.y += (this.endTo.y - this.current.y) / 10;
      (this.$refs.topCircle as HTMLDivElement).style.transform = `translate(0px,${this.current.y - this.circleRect!.y}px)`;
      this.y = this.current.y - this.circleRect!.y;
      console.log(this.y, this.largeFlag);
      if (this.largeFlag) {
        this.timer = null;
        return;
      }
      this.timer = window.requestAnimationFrame(this.play);
    } else {
      this.timer = null;
    }
  }
  public mounted() {
    console.log(this.circleRect);
    this.rect =  (this.$el as HTMLElement).getBoundingClientRect();
    this.circleRect = (this.$refs.topCircle as HTMLElement).getBoundingClientRect();
    const { y } = this.circleRect;
    this.y = y;
    console.log(this.circleRect);
  }
  public unmounted() {
    window.cancelAnimationFrame(this.timer!);
    this.timer = null;
  }
}
</script>

<style lang="postcss" scoped>
  .wave{
    touch-action: none;
    position: absolute;
    left: 0;top: 0;
    width: 100%;height: 100%;
    background: #1c1c1c;
    /* &.pass-enter-active{
      .top-circle .shrink{
        transition: transform .5s ease-in;
      }
    }
     &.pass-leave-active{
      .top-circle .shrink{
        transition: transform .5s ease-in;
      }
     }
     &.pass-enter-from{
       .top-circle .shrink{
         transform: scale(1);
       }
     }
     &.pass-leave-to{
       .top-circle .shrink{
         transform: scale(1);
       }
     } */
    .top-circle{
      position: absolute;
      left: 50%;top: 50%;
      width: 50px;height: 50px;
      margin-left:-25px;
      margin-top:-25px;
      .circle{
        position: absolute;
        left: 0;top: 0;
        width: 50px;height: 50px;
        border-radius:50%;
        border:.5px solid #fff;
      }
      .shrink{
        animation: shrink .5s ease-in forwards;
      }
      .enlarge{
        animation: enlarge .5s ease-out forwards;
      }
      .pulsate1{
        animation: wave 1s infinite 1s ease-in-out;
      }
      /* .pulsate2{
        animation: wave 1s infinite 1.2s ease-out;
      }
      .pulsate3{
        animation: wave 1s infinite 1.5s ease-out;
      } */
    }
  }
  @keyframes wave{
    0%{
      transform:scale(1);
      opacity: 1;
    }
    100%{
      transform:scale(3);
      opacity: 0;
    }
  }
  @keyframes shrink {
    0%{
      transform:scale(1);
    }
    100%{
      transform:scale(.5);
    }
  }
  @keyframes enlarge {
    0%{
      transform:scale(.5);
    }
    100%{
      transform:scale(1);
    }
  }
</style>
